import React, {Component} from 'react';
import {
    StyleSheet,
    AppRegistry,
    Image,
    
} from 'react-native';

import {
    TabNavigator,
    StackNavigator
} from 'react-navigation';

import Home from './view/index'
import Guan from './view/guan'
import City from './view/city/index'
import Me from './view/center/login'
      const Hometab =StackNavigator({
        Home:{
            screen: Home,
            navigationOptions:{
                header:null
              }
        }
    });
    const Guantab =StackNavigator({
      Home:{
          screen: Guan,
          navigationOptions:{
              header:null
            }
      }
  });
  const Citytab =StackNavigator({
    Home:{
        screen: City,
        navigationOptions:{
            header:null
          }
    }
});
const Metab =StackNavigator({
    Home:{
        screen: Me,
        navigationOptions:{
            headerTitle: '登录/注册',
          }
    }
});
        
        const Tabs = TabNavigator(
            {
                Hometab: {
                    screen: Hometab,
                    navigationOptions: {
                        tabBarLabel: '首页',
                        tabBarVisible : false,
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./view/img/palace_list_arch_btn_2x.png')}/>,
                    }
                },

                Findtab: {
                    screen: Guantab,
                    navigationOptions: {
                        tabBarLabel: '紫微宫',
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./view/img/palace_list_mus_btn_2x.png')}
                        />,
                    }
                },

                Citytab: {
                    screen: Citytab,
                    navigationOptions: {
                        tabBarLabel: '紫薇城',
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./view/img/tumblr-link.png')}
                        />,
                    }

                },

                Metab: {
                    screen: Metab,
                    navigationOptions: {
                        tabBarLabel: '我的',
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./view/img/tumblr-photo.png')}
                        />,
                    }
                }
            },
            {
                animationEnabled: true,
                tabBarPosition: 'bottom',
                swipeEnabled: false,// 是否可以左右滑动切换tab
                backBehavior: 'none',
                tabBarOptions: {
                    iconStyle: {height: 32,},//图标样式
                    activeTintColor: 'orange',//选种颜色
                    inactiveTintColor: 'gray',//未选中颜色
                    showIcon: true,
                    indicatorStyle: {
                        height: 0,
                    },
                    style: {backgroundColor: '#CCCCCC',},
                    tabStyle: {height: 50,},
                    labelStyle: {fontSize: 12,marginBottom: 8,},
                    pressColor: 'gray',
                    pressOpacity: 0.8,
                    upperCaseLabel: false,
                },

            }
        )



const styles = StyleSheet.create({

    tabBar: {
        backgroundColor: '#CCCCCC',
    },
    tabBarItem: {
        height: 50,
    },
    tabBarImage: {
    width: 28,
    height: 28,
    marginTop: 15,
    },
    tabBarIcon: {
        height: 32,
    },

    tabBarLabel: {
        fontSize: 12,
        marginBottom: 8,

    },

})
// export default Tabs;
AppRegistry.registerComponent('GugongProject', () => Tabs);


